<template>
    <div>
        <div class="movie" v-for="item of movies" :key="item.pic">
            <img class="pic" :src="item.pic">
            <div>
                <p class="title">{{item.title}}</p>
                <p class="rating">{{item.raiting}}</p>
                <p class="slogo">{{item.slogo}}</p>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        data(){
        return {
        movies:[]
        }
    },
    mounted(){
        let url = "http://47.108.197.28:4000/api/movie/inTheaters";
        axios.get(url).then(res=>{
        this.movies = res.data.res;
        })
    },
    }
</script>

<style scoped>
.movie{
    margin: 10px 10px;
    display: flex;
    align-items: center;
}
.pic{
    width: 60px;
    height: 80px;
}
</style>